
/**
 * Ext.ux.HeaderToolbar
 * @extends Ext.Toolbar
 * Creates and manages a toolbar in the Header element of any Ext.Panel or subclass
 */
Ext.ux.HeaderToolbar = function(config) {
	var config = config || {};
	Ext.apply(this, config);
};

Ext.ux.HeaderToolbar.prototype = {
	/**
	 * Add the header Toolbar to the Header element if a header is present and 
	 * provide a getHeaderToolbar method
	 * @param {Ext.Panel} The panel to add a header Toolbar to
	 */
	init	: function(panel) {
		Ext.apply(panel, {

			/**
			 * Adds to Panel's onRender method, creates header toolbar if everything required is in place
			 */
			onRender			: panel.onRender.createSequence(function(ct,
							position) {
						// If it is a window we need to position the header toolbar in the window
						if (this.hbar && this.header) {
							this.headerToolbar = new Ext.Toolbar(this.hbar);

							// Find the element to render the toolbar to
							var toolbar = this.el.child('.x-window-tl')
									.createChild({
												cls			: 'x-window-toolbar-r',
												children	: [{
															cls	: 'x-window-toolbar-c'
														}]
											}
									);

							// get the toolbar element
							var el = this.el.child('.x-window-toolbar-c');

							// render the toolbar
							this.headerToolbar.render(el);

							this.headerToolbar.addClass('x-header-toolbar');

							// Change the class on the toggle tool
							this.el.child('.x-tool-collapse-header')
									.addClass('x-shown');

							return;
						};

						// If it is just a panel, we need to position it at the top of the panel
						if (this.hbar) {
							this.headerToolbar = new Ext.Toolbar(this.hbar);

							this.insert(0, this.headerToolbar);

							this.headerToolbar.addClass('x-header-toolbar');
						};

						this.addEvents(
								/**
						 * @event before-collapse-header-toolbar
						 * Fires before the header toolbar is collapsed
						 */
								'before-collapse-header-toolbar',

								/**
								 * @event before-expand-header-toolbar
								 * Fires before the header toolbar is expanded
								 */
								'before-expand-header-toolbar',

								/**
								 * @event collapse-header-toolbar
								 * Fires when the header toolbar has been collapsed
								 */
								'collapse-header-toolbar',

								/**
								 * @event expand-header-toolbar
								 * Fires when the header toolbar has been expaned
								 */
								'expand-header-toolbar'
						);
					}
			),

			/**
			 * @return {Ext.Toolbar} The Header Toolbar, if one is available
			 */
			getHeaderToolbar	: function() {
				return this.headerToolbar;
			},

			/**
			 * @property headerToolbarHidden
			 * @type Boolean
			 * Stores whether or not the header toolbar is currently hidden (collapsed)
			 */
			headerToolbarHidden	: false,

			/**
			 * Collapses the header toolbar by sliding it upwards
			 * @param {Object} opts Options object passed to the slideOut call
			 */
			hideHeaderToolbar	: function(opts) {
				this.fireEvent('before-collapse-header-toolbar',
						this.headerToolbar
				);

				var opts = opts || {};
				Ext.applyIf(opts, {
							scope		: this,
							duration	: 0.3,
							callback	: function() {
								this.headerToolbarHidden = true;
								this.headerToolbar.hide();

								this.fireEvent('collapse-header-toolbar',
										this.headerToolbar
								);
							}
						});

				// Change the class on the toggle tool
				this.el.child('.x-tool-collapse-header').removeClass('x-shown');

				// Get the height of the headertoolbar
				this.height = {
					toolbar	: this.headerToolbar.el.getHeight(),
					win		: this.el.getHeight()
				};

				this.headerToolbar.el.slideOut('t', opts);

				// Resize the shadow
				this.el.shadow.el.child('.xsc').shift({
					scope		: this,
					height		: this.el.shadow.el.child('.xsc').getHeight()
							- this.height.toolbar,
					duration	: 0.3
				}
				);
			},

			/**
			 * Shows the header toolbar by sliding it downwards
			 * @param {Object} opts Options object passed to the slideIn call
			 */
			showHeaderToolbar	: function(opts) {
				this.fireEvent('before-expand-header-toolbar',
						this.headerToolbar
				);

				var opts = opts || {};
				Ext.applyIf(opts, {
							scope		: this,
							duration	: 0.3,
							callback	: function() {
								this.headerToolbarHidden = false;

								this.fireEvent('expand-header-toolbar',
										this.headerToolbar
								);
							}
						});

				this.headerToolbar.show();
				this.headerToolbar.el.slideIn('t', opts);

				// Change the class on the toggle tool
				this.el.child('.x-tool-collapse-header').addClass('x-shown');

				// Resize the shadow
				this.el.shadow.el.child('.xsc').shift({
					scope		: this,
					height		: this.el.shadow.el.child('.xsc').getHeight()
							+ this.height.toolbar,
					duration	: 0.3
				}
				);

				var newHeight = this.el.getHeight();
				if (newHeight != this.height.win) {
					this.el.shadow.el.shift({
								scope		: this,
								height		: this.el.shadow.el.getHeight()
										+ this.height.toolbar,
								duration	: 0.3
							});
				};
			},

			/**
			 * Toggles the header toolbar between visible and hidden
			 */
			toggleHeaderToolbar	: function() {
				this.headerToolbarHidden ? this.showHeaderToolbar() : this
						.hideHeaderToolbar();
			}
		}
		);
	}
};